<template>
	<div class="wrapper">
		<div class="switchTitle">
			<Button class="switchButton" type="primary" @click="save()">保存</Button>
			<Button class="switchButton" @click="routeReturn">预览</Button>
			<span class="switchClose" @click="$router.push({path:'/ui/ui-design'})">
				<Icon type="ios-close" size="32" />
			</span>
		</div>
		<div class="mainContent">
			<div class="flexContent">
				<div class="flexContentLeft">
				
					<div ref="designBoard" class="designBoard1 designBoardPosition">
							<div ref="designBoardMain" id="designItem">
						    <design-table ref="designTable" :pages-content="pagesContent" :isShow='tableShow' @showChange="showChange"></design-table>
							</div>
						
					</div>
				</div>
				<div class="flexContentRight" v-show="!tableShow">
					<div class="switchTitle">
						<ul class="mainContentUl">
							<li class="mainContentTitle">
								<span>栏目内容</span><span class="colorOrage">(拖拽放到左边板块中)</span>
							</li>
						</ul>
					</div>
					<div
						class="designBoard split-atrr"
						ref="leftSplit"
						id="leftSplit"
						@mousemove="scrollHeightChange(1)"
						@mouseout="scrollHeightChange(2)"
					>
						<Scroll ref="ivScroll" class="ivScroll" :height="scrollHeight" :class="{scrollMain:scrollMain}">
							<ul class="mainContentUl mainContentUl1" ref="contentScroll">
								<li
									class="mainContentTitle mainContentTitle1 "
									v-for=" (item,index) in contentEl"
									:key="index"
									@mousemove="_moveContent(item)"
									@mousedown="_mouseDownContent(item)"
									@mouseup="_mouseUpContent(item,'right')"
								>
								<!-- v-html="item.content" -->
									<div class="designBoardAb designborder scrollAuto" >
										<component :is="item.content"></component>
									</div>
								</li>
							</ul>
						</Scroll>
					</div> 
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import  designTable from "@/views/ui/ui-design/table/Table.vue"
import designWh from './design-wh-modal.vue'
import {componentList} from "@/components/global-register/index";

import {
getPageSave,getListContainer
} from '@/api/uiDesign.js'
export default {
	name: 'ui-design-board',
	components: { designWh,designTable},
	props: {},
	data() {
		return {
			pagesContent:{},
           tableShow:true,
			openWh1: false, //是否打开 行高 列宽
			openWh: false, //是否打开 行高 列宽
			cell: [], //保存信息
			designChioce: null, //选择
			position: null, //左右拖拽 区分
			scrollHeight: '100%', //默认滚动条高度
			scrollHeight1: '100%',
			scrollMain: true, //是否 显示
			scrollMain1: false, //是否 显示
			designBoardHtml: null, //  designBoardHtml 是否显示
			openSplit: false, //是否打开 界面分割
			getEl: '', //保存 获取 拖拽值
			setEl: '', //设置目标值
		contentEl: [
				
			],
		}
	},
	watch: {
     tableShow(val){
      let that =this;
        this.$nextTick(function () {
        that.scrollHeight = that.$refs.leftSplit.clientHeight
        })
	 }
	},
	computed: {},
	methods: {
		routeReturn(){
				this.setSession('preview', this.pagesContent)
					let  routeData= this.$router.resolve({
						path: '/design-preview',
					})
					  window.open(routeData.href, '_blank');
		},
			async getPageSave(item){
			let res = await getPageSave(item);
				if (res.success) {
			this.$Message.success(res.message)
			this.setSession('designBoard',item)
				this.setSession('preview', item)
			} else {
				this.$Message.error(res.message)
			}
		},
		async getListContainer(){
			let res = await getListContainer();
				if (res.success) {
						this.contentEl=res.result
					console.log(res)
				}
		},
		save(){
        if(JSON.stringify(this.$refs.designTable.tableData)=="{}"){
			return
		}else{
			let data=JSON.parse(JSON.stringify(this.pagesContent));
			data.cols=this.$refs.designTable.tableData.cols
			data.rows=this.$refs.designTable.tableData.rows
			data.layoutDetail=this.$refs.designTable.tableData.layoutDetail
			this.getPageSave(data)
		}  
		},
    showChange(val){

      this.tableShow=val;
    },
		// 右侧拖拽
		_moveContent(e) {
			let el = e.target
		},
		_mouseUpContent(e) {},
		_mouseDownContent(e) {
			this.getEl = { target: e, index1: null, index2: null }
      this.position = 'right'
      let getEl={
          ...	this.getEl,
          position:this.position
      }
      		this.setStore('htmlContent', getEl)
      
		},
		
		scrollHeightChange(
			val,
			item = 'scrollMain',
			ref1 = 'leftSplit',
			ref2 = 'contentScroll'
		) {
			//滚动条 出现 收起

			if (val == 1) {
				if (
					this.$refs[ref1].clientHeight >
					this.$refs[ref2].clientHeight
				)
					return //如果没有超出  滚动条不显示
				this[item] = false
			} else if (val == 2) {
				this[item] = true
			}
		},
	},
	created() {
		this.getListContainer();
	},
	mounted() {
		let id=document.getElementById('leftSplit');
		this.scrollHeight = this.$refs.leftSplit.clientHeight
		console.log(id.style)
			if(this.getSession("designBoard")){
				this.pagesContent=JSON.parse(this.getSession("designBoard"))
                      console.log(this.pagesContent)
			}
	},
}
</script>
<style lang="less" scoped>
.wrapper {
	width: 100%;
}
.switchTitle {
	height: 50px;
}
.switchButton {
	margin-right: 16px;
}
.mainContent {
	border: 1px solid rgba(220, 222, 226, 1);
	width: 100%;
	height: calc(~'100% - 50px');
}
.mainContentUl {
	height: 100%;
	width: 100%;
	padding-left: 12px;
	border-bottom: 1px solid rgba(220, 222, 226, 1);
}
.scrollAuto{
	 overflow-y: auto;  
            overflow-x: scroll;  
}
// .mainContentUl  ::-webkit-scrollbar {
// 	display: none;
// }
.mainContentTitle {
	list-style: none;
	height: 100%;
	float: left;
	display: flex;
	align-items: center;
	margin-right: 12px;
}
.mainContentUl1 {
	padding: 4px 0;
	margin: 0;
	height: auto;
}
.mainContentTitle1 {
	display: inline-block;
	width: 100%;
	height: auto;
	float: none;
	margin: 0;
	padding: 4px;
}
.mainContentTitle span {
	cursor: pointer;
	display: inline;
	padding: 4px;
}
.designBoard {
	width: 100%;
	height: calc(~'100% - 50px');
}
.designBoard1 {
	width: 100%;
	height:100%;
}
@import url('./css/ui-design-board.css');
&/deep/ .ivu-scroll-content {
	height: 100%;
	width: 100%;
}

.colorOrage{
  color: #F5A623;
}
</style>